<template>
  <div>
    <p>Parent</p>
    <!--
    <Dialog>
      中间写的视图就会传递给子组件
      <table border="1px">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>邹思敏</td>
            <td>22</td>
            <td>湖南邵阳</td>
          </tr>
          <tr>
            <td>张文清</td>
            <td>22</td>
            <td>江西赣州</td>
          </tr>
          <tr>
            <td>蔡嘉奕</td>
            <td>24</td>
            <td>江西南昌</td>
          </tr>
        </tbody>
      </table>
    </Dialog>
     -->
    <hr />
    <!-- <Dialog>
      <form>
        用户名：<input type="text" v-model="username" /><br />
        地址：<input type="text" v-model="address" /><br />
        <button @click="register">注册</button>
      </form>
    </Dialog> -->
    <Dialog>
      <template v-slot:header> 标题 </template>
      <p>Open the dialog from the center from the screen</p>
      <!-- #是v-slot:的简写 -->
      <template #footer>
        <button>cancel</button>&nbsp;&nbsp;
        <button>confirm</button>
      </template>
    </Dialog>
  </div>
</template>

<script>
// import Dialog from './10-Dialog.vue'
import Dialog from './11-Dialog.vue'
export default {
  components: {
    Dialog
  },
  data () {
    return {
      username: '黄日汉',
      address: '广西桂林'
    }
  },
  methods: {
    register () {
      alert(this.username + ' ' + this.address)
    }
  }
}
</script>
